﻿@page "/datepicker"

<RadzenExample Name="DatePicker">
<div class="row">
    <div class="col-md-6">
        <h3>DatePicker</h3>
        <RadzenDatePicker @bind-Value="value" Change="@(args => Change(args, "DatePicker", "MM/dd/yyyy"))" />
        <h3 style="margin-top: 40px">DatePicker with time</h3>
        <RadzenDatePicker TValue="DateTime?" ShowTime="true" Change="@(args => Change(args, "DatePicker with time", "MM/dd/yyyy HH:mm"))" DateFormat="MM/dd/yyyy HH:mm" />
        <h3 style="margin-top: 40px">DatePicker with 12 hour time format</h3>
        <RadzenDatePicker TValue="DateTime?" ShowTime="true" Change="@(args => Change(args, "DatePicker with 12 hour time format", "MM/dd/yyyy h:mm tt"))" HourFormat="12" DateFormat="MM/dd/yyyy h:mm tt" />
        <h3 style="margin-top: 40px">Time-only DatePicker</h3>
        <RadzenDatePicker TValue="DateTime?" ShowTime="true" TimeOnly="true" DateFormat="HH:mm" Change="@(args => Change(args, "Time-only DatePicker", "HH:mm"))" />
        <h3 style="margin-top: 40px">Calendar</h3>
        <RadzenDatePicker TValue="DateTime?" Inline="true" Change="@(args => Change(args, "Calendar", "MM/dd/yyyy"))" />
        <h3 style="margin-top: 40px">Disabled DatePicker</h3>
        <RadzenDatePicker Disabled="true" @bind-Value="value" Change="@(args => Change(args, "DatePicker", "MM/dd/yyyy"))" />
    </div>
    <div class="col-md-6">
        <h3>Events</h3>
        <RadzenCard style="overflow: auto;height:750px;">
            @foreach (var e in events.OrderByDescending(i => i.Key))
            {
                @e.Value
                <br />
            }
        </RadzenCard>
    </div>
</div>
</RadzenExample>


@code {
    DateTime? value = DateTime.Now;

    Dictionary<DateTime, string> events = new Dictionary<DateTime, string>();

    void Change(DateTime? value, string name, string format)
    {
        events.Add(DateTime.Now, $"{name} value changed to {value?.ToString(format)}");
        StateHasChanged();
    }
}
